
<%@ page import="auctionhaus.Listing" %>
<!doctype html>
<html>
	<head>
		<meta name="layout" content="main">
		<g:set var="entityName" value="${message(code: 'listing.label', default: 'Listing')}" />
		<title><g:message code="default.show.label" args="[entityName]" /></title>
	</head>
    <g:javascript>
        $(document).ready(function(){
            loadLatestBids(${listingInstance.id});
            setInterval("loadLatestBids(${listingInstance.id})", 5000);
        });
    </g:javascript>
	<body>
		<a href="#show-listing" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
		<div class="nav" role="navigation">
			<ul>
				<li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
				<li><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></li>
                <g:if test="${session.customer}">
				    <li><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></li>
                </g:if>
			</ul>
		</div>
		<div id="show-listing" class="content scaffold-show" role="main">
			<h1 id="head1"><g:message code="default.show.label" args="[entityName]" /></h1>
            <div id="message2">
			<g:if test="${flash.message}">
			    <div class="message" role="status">${flash.message}</div>
			</g:if>
            </div>
            <div id="error2">
            <g:if test="${flash.error}">
                <ul class="errors" role="alert"> ${flash.error}
                </ul>
            </g:if>
            </div>
            <g:hasErrors bean="${listingInstance}">
                <ul class="errors" role="alert">
                    <g:eachError bean="${listingInstance}" var="error">
                        <li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
                    </g:eachError>
                </ul>
            </g:hasErrors>
			<ol class="property-list listing">
			
				<g:if test="${listingInstance?.name}">
				<li class="fieldcontain">
					<span id="name-label" class="property-label"><g:message code="listing.name.label" default="Name" /></span>
					
						<span class="property-value" aria-labelledby="name-label"><g:fieldValue bean="${listingInstance}" field="name"/></span>
					
				</li>
				</g:if>
			
				<g:if test="${listingInstance?.description}">
				<li class="fieldcontain">
					<span id="description-label" class="property-label"><g:message code="listing.description.label" default="Description" /></span>
					
						<span class="property-value" aria-labelledby="description-label"><g:fieldValue bean="${listingInstance}" field="description"/></span>
					
				</li>
				</g:if>
			
				<g:if test="${listingInstance?.winner}">
				<li class="fieldcontain">
					<span id="winner-label" class="property-label"><g:message code="listing.winner.label" default="Winner" /></span>
					
						<span class="property-value" aria-labelledby="winner-label">${listingInstance?.winner.emailAddress.replaceFirst(/@.*/, "")}</span>
					
				</li>
				</g:if>
			
				<g:if test="${listingInstance?.endDateTime}">
				<li class="fieldcontain">
					<span id="endDateTime-label" class="property-label"><g:message code="listing.endDateTime.label" default="End Date Time" /></span>
					
						<span class="property-value" aria-labelledby="endDateTime-label"><g:formatDate date="${listingInstance.endDateTime}"  type="datetime" style="MEDIUM"/></span>

				</li>
				</g:if>
			
				<g:if test="${listingInstance?.seller}">
				<li class="fieldcontain">
					<span id="seller-label" class="property-label"><g:message code="listing.seller.label" default="Seller" /></span>
						<span class="property-value" aria-labelledby="seller-label">${listingInstance?.seller.emailAddress.replaceFirst(/@.*/, "")}</span>
				</li>
				</g:if>
			
				<g:if test="${listingInstance?.startingBidAmount}">
				<li class="fieldcontain">
					<span id="startingBidAmount-label" class="property-label"><g:message code="listing.startingBidAmount.label" default="Starting Bid Amount" /></span>
					
						<span class="property-value" aria-labelledby="startingBidAmount-label"><g:formatNumber number="${listingInstance.startingBidAmount}" type="currency" currencyCode="USD" /></span>
                </g:if>


                    <li class="fieldcontain">
                        <span id="bids-label" class="property-label"><g:message code="listing.bids.label" default="Current Bid" /></span>
                         <g:if test="${lastBid}">
                             <span id="lastBid" class="property-value" aria-labelledby="bids-label"><g:formatNumber number="${lastBid.amount}" type="currency" currencyCode="USD" /></span>
                         </g:if>
                         <g:elseif test="${!lastBid}">
                            <span id="lastBid" class="property-value" aria-labelledby="bids-label">No bids</span>
                         </g:elseif>
                     </li>


                <g:javascript>
                    function updateLastBid(data, status) {
                        if (data.error)
                        {
                            $("#message2").html("").removeClass("message");
                            $("#error2").addClass("errors").attr("role", "alert").text(data.message);
                        }
                        else
                        {
                            $("#error2").html("").removeClass("errors");
                            $("#lastBid").text('$' + parseFloat(data.amount).toFixed(2));
                            $("#message2").addClass("message").attr("role", "status").text(data.message);
                            $("#nameField").val("");
                            loadLatestBids(data.listingId)
                        }
                    }

                    function loadLatestBids(id) {
                        $.ajax({
                            url: '/AuctionHaus/listing/getLatestBids/' + id,
                            dataType: 'json',
                            success: function(data, textStatus, jqXHR){
                                updateBids(data)
                            },
                            failure: function(data){
                                alert('Failure loading bids.');
                            },
                            error: function (jqXHR, textStatus, errorThrown){
                                alert('Error loading bids.');
                            }
                        });
                    }

                    function updateBids(data)
                    {
                        if (data == null)
                        {
                            return
                        }
                        var bids = data.bids;
                        $("#lastBid").text('$' + parseFloat(bids[0].amount).toFixed(2));
                        $('#latestBids').html('');
                        $('#latestBids').append('<h1>Latest Bids</h1>');
                        $('#latestBids').append('<table><thead>');
                        $('#latestBids').append('<tr><td>Amount</td><td>Bidder</td><td>Date</td></tr>');
                        $('#latestBids').append('</thead>');
                        $('#latestBids').append('<tbody>');
                        $.each(bids, function(index, bid) {
                            $('#latestBids').append('<tr>');
                            var row = '<td>' + '$' + parseFloat(bid.amount).toFixed(2) + '</td>';
                            $('#latestBids').append($(row));
                            row = '<td>' + bid.bidder + '</td>';
                            $('#latestBids').append($(row));
                            row = '<td>' + bid.dateCreated + '</td>';
                            $('#latestBids').append($(row));
                            $('#latestBids').append('</tr>');

                        });
                        $('#latestBids').append('</tbody>');
                        $('#latestBids').append('</table>');
                    }
                </g:javascript>
                <g:if test="${session.customer}">
                    <g:form action="placeBid">
                        <g:hiddenField name="id" value="${listingInstance?.id}" />

                        <li class="fieldcontain">
                            <span id="bidAmount-label" class="property-label"><g:message code="listing.bidAmount.label" default="Bid Amount" /></span>

                            <span class="property-value" aria-labelledby="bidAmount-label"><g:textField id="nameField" name="amount" /></span>

                        </li>
                        <li class="fieldcontain">

                            <span class="property-value"><g:submitToRemote url="[controller:'listing', action:'placeBid']" value="Place Bid" onSuccess="updateLastBid(data, status)"/></span>

                        </li>
                    </g:form>
                </g:if>

                <div id="latestBids">

                </div>
			
			</ol>
			<g:form>
				<fieldset class="buttons">
					<g:hiddenField name="id" value="${listingInstance?.id}" />
                    <g:if test="${session.customer != null && (listingInstance.seller.id == session.customer.id || session.customer.isAdmin)}">
                        <g:link class="edit" action="edit" id="${listingInstance?.id}"><g:message code="default.button.edit.label" default="Edit" /></g:link>
                        <g:actionSubmit class="delete" action="delete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" />
                    </g:if>
				</fieldset>
			</g:form>
		</div>
	</body>
</html>
